<template>
  <div class="h100">
    <MkDragSplitPanel class="h100" leftWidth="350px">
      <template #left>
        <ListXueYe ref="listXueYeRef" @dblclick="listDblclick" />
      </template>
      <template #right>
        <el-tabs v-model="tabActivieName" type="border-card" style="flex: 1; overflow: auto;" @tab-click="tabChange">
          <el-tab-pane label="输血前核对" name="shuXueQian">
            <ShuXueQianHeDui ref="shuXueQianHeDuiRef" />
          </el-tab-pane>
          <el-tab-pane label="输血15分钟" name="shuXueShiWuFenZhong">
            <ShuXueShiWuFenZHong ref="shuXueShiWuFenZhongRef" />
          </el-tab-pane>
          <el-tab-pane label="输血结束" name="shuXueJieShu">
            <ShuXueJieShju ref="shuXueJieShjuRef" />
          </el-tab-pane>
        </el-tabs>
      </template>
    </MkDragSplitPanel>
  </div>
</template>

<script lang='ts' setup>
import { TabsPaneContext } from 'element-plus'
import ListXueYe from './listXueYe.vue'  
import ShuXueQianHeDui from '/@/views/nurse/shuXueQianHeDui/index.vue'
import ShuXueShiWuFenZHong from '/@/views/nurse/shuXueShiWuFenZhong/index.vue'
import ShuXueJieShju from '/@/views/nurse/shuXueJieShu/index.vue'

const listXueYeRef = ref()
const listDblclick = (row: any) => {
  
}

const tabActivieName = ref('shuXueQian')

const tabChange = (pane: TabsPaneContext, ev: Event) => {
  listXueYeRef.value?.changeZhuangTai(pane.paneName)
}

const shuXueQianHeDuiRef = ref()
const shuXueShiWuFenZhongRef = ref()
const shuXueJieShjuRef = ref()
</script>

<style lang='scss' scoped>
:deep(.el-tabs__content) {
  overflow: auto;
}
</style>